//重新开始按钮
let restarBtn = document.querySelector('#restart') as HTMLButtonElement
//获取结果元素
let resultArea = document.querySelector('#message') as HTMLDivElement
let winner = document.querySelector('#winner') as HTMLParagraphElement
//获取单元格元素
let cell = document.querySelector('.cell') as HTMLDivElement
//获取所有单元格
let cells = document.querySelectorAll('.cell') as NodeList
//添加类名
let cellObj = cell.classList
let flag: boolean = true
//定义玩家的枚举
enum Player { X = "x", O = "o", nextX = "readx", nextO = "reado" }
//类名 
let hoverClass: Player = Player.nextX
let confirmClass: Player = Player.X

//单元格 个数计数器
let selectCounts: number = 0

//给container 添加点击事件
let container = document.querySelector('.container') as HTMLDivElement


//胜利 的多种情况
let winArr: number[][] = [
  [0, 1, 2], [3, 4, 5], [6, 7, 8], //横
  [0, 3, 6], [1, 4, 7], [2, 5, 8], //竖
  [0, 4, 8], [2, 4, 6]
]

//判断胜利的数组
function isWinner(Player) {
  let result = winArr.some(item => { //获取索引数组
    return item.every(cellindex => { //通过索引数组拿到可能单元格的类名进行判断
      let cellobj = cells[cellindex] as HTMLDivElement
      return cellobj.classList.contains(Player)
    })
  })

  return (result)
}



function mouse_hover(Event: MouseEvent) {
  //给触发事件的对象添加相应的类名
  let target = Event.target as HTMLDivElement
  // console.log(target)

  target.classList.add(hoverClass)
}



//鼠标移动上预览事件
container.addEventListener('mousemove', mouse_hover)
//鼠标离开 去除预览事件
container.addEventListener('mousemove', (Event: MouseEvent) => {

  let target = Event.target as HTMLDivElement
  target.addEventListener('mouseleave', () => {

    target.classList.remove(hoverClass)
  })
})


//点击确认事件
container.addEventListener('click', (Event: MouseEvent) => {
  //给触发事件的对象添加相应的类名
  let target = Event.target as HTMLDivElement

  //判断触发对象身上是否已经添加过
  if (target.classList.contains('x') || target.classList.contains('o')) {
    return
  } else {
    //按钮 和 游戏区域 标签不需要添加 类名
    if (target.innerHTML !== '重新开始' && !target.classList.contains('game-message')) {
      target.classList.add(confirmClass)
    }

    if (isWinner(confirmClass)) {
      winner.innerHTML = confirmClass + " 赢了"
      resultArea.style.display = 'block'

      //移除相关事件
      container.removeEventListener('mousemove', mouse_hover)
      return
    }
    flag = !flag
    //类名
    hoverClass = flag ? Player.nextX : Player.nextO
    confirmClass = flag ? Player.X : Player.O


    //选择的单元格个数加1
    selectCounts++
    //平局判断
    if (selectCounts == 9 && !isWinner(confirmClass)) {
      winner.innerHTML = "平局"
      resultArea.style.display = 'block'

      //移除相关事件
      container.removeEventListener('mousemove', mouse_hover)
      return
    }
  }

})


//重新开始游戏
restarBtn.addEventListener('click', () => {
  resultArea.style.display = 'none'
  //移除类名
  cells.forEach(item => {
    let cell = item as HTMLDivElement
    cell.classList.remove(Player.X, Player.O, Player.nextO, Player.nextX)
  })
  console.log(restarBtn)
  // //重置计数器
  selectCounts = 0
  //鼠标移动上预览事件
  container.addEventListener('mousemove', mouse_hover)


})